<template>
	<view class="cart_box" v-if="buffer">
		<view class="cart_head">
			<view class="cart_menu">
				<text>全部(20)</text>
				<text>降价(4)</text>
				<text>常卖(2)</text>
				<text>分类</text>
			</view>
			<view class="cart_ticket">
				<!-- 此处使用checkbox是因为支付宝switch没有checkbox类型 -->
				<!-- <switch type="checkbox" :checked="true" color="#ff6040"  /> -->
				<checkbox  color="#FF6040" value="true" />
				<text class="cart_ticket_text1">小U自营</text>
				<text class="cart_ticket_text2">以免运费 |</text>
				<text class="cart_ticket_text3">领券</text>
			</view>
		</view>
		
		<view class="container" >	
			<view class="top">
				<scroll-view 
					class="scroll-view_H" 
					scroll-x="true" 
					scroll-left="0" 
					v-for="(item,index) in cartList"
					:key="item.id"
				>
					<view class="cartInfo" id="demo1">
						<!-- 明日来写购物车基本信息 -->
						<view class="cartInfochild">
							<!-- 选择框 -->
							<view class="cartInfo_switch common">
								<!-- 点击当前商品 -->
								<checkbox-group  >
									<checkbox
									
										color="#FF6040" 
										:checked="item.status"
										@click="dan(index)"
										
									/>
								</checkbox-group>
								
								<!-- <switch type="checkbox" :checked="true"  color="#ff6040" /> -->
							</view>
							<!-- 图片 -->
							<view class="cartInfo_image common">
								<image :src="item.img" mode="widthFix"></image>
							</view>
		
							<!-- 信息 -->
							<view class="cartInfo_info">
								<label style="font-size: 32rpx;">{{item.goodsname}}</label>
								<label style="font-size: 24rpx; color: #ccc;">规格：不错的商品</label>
								<label style="font-size: 20rpx; color: #FF6040;">比加入降低￥100</label>
								<label style="color:#FF6040;">￥
									<text style="font-size: 40rpx;color:#FF6040;">{{item.price}}
									</text> <text>￥200</text>
								</label>
							</view>
							<!-- 加减数量 -->
							<view class="cartInfo_num">
								<view class="cartInfo_num_child">
									<label @click="changeNum(1,index,item.id)">－</label>
									<label >{{item.num}}</label>
									<label @click="changeNum(2,index,item.id)">＋</label>
								</view>
							</view>
						</view>
		
					</view>
					<view class="cartDel" id="demo2" @click="del(index,item.id)">
						<label  for="">删除</label>
					</view>
				</scroll-view>
			</view>
			
			<!-- 底部 -->
			<view class="foot">
				<view class="footd1">
					<checkbox-group >
						<checkbox  color="#FF6040" value="1"  :checked="allStatus"
						  @click="changeAll"
						  />
					</checkbox-group>
					<!-- <switch type="checkbox" :checked="true" color="#ff6040" /> -->
					<label>全选</label>
				</view>
				<view class="footd2">
					<view class="footd2sp1">合计：<label style="color: #FF6040;">￥ {{jisuan.money}}</label></view>
					<label class="footd2sp2">不含运费，已优惠￥0.00</label>
				</view>
				<!-- 跳到提交订单，结算页面 -->
				<view class="footd3" hover-class="touchOpacity" @click="orderConfirm">
					<!-- 被选中的商品的个数 -->
					<label>去结算({{jisuan.number}}件)</label>
				</view>
			</view>
		
		</view>
	</view>
	<!-- 无数据提示 -->
	<view v-else>
		<cartnull />
	</view>
</template>

<script>

	// 引入数据为空提示组件
	import cartnull from '@/components/cartnull/cartnull.vue';
	export default {
		components:{cartnull},
		data() {
			return {
				cartList:[],//初始化购物车数据
				allStatus:true,
				buffer:'', //检测购物车是否有数据
			}
		},
		computed:{
			//计算金额与数量
			jisuan(){
				let money=0
				let number=0
				var cartCount=0
				this.cartList.forEach(item=>{
					if(item.status){
						money+=parseInt(item.num)*parseFloat(item.price)
						number+=item.num
					}
					cartCount+=1
				})
				//设置购物车角标
				if(cartCount>0){
					uni.setTabBarBadge({
						index:2,
						text:cartCount.toString()
					})
				}else{
					uni.removeTabBarBadge({
						index:2
					})
				}
				return {money,number}
			}
		},
		// 页面显示时
		onShow() {
		let userInfo=this.$tool.isLogin()
		if(userInfo == false) return ;
			this.getCart(userInfo.uid)
		},
		methods:{
			//跳转到确认订单页面
			orderConfirm(){
				//组装需要确认的订单数据
				let orderConfirm =[];
				this.cartList.forEach(item=>{			
					if(item.status){orderConfirm.push(item)} 
				})
				//检测是否选择购买的商品
				if(orderConfirm.length==0){
					this.$tool.tip("请先选择要购买的商品")
					return;
					}
				uni.setStorageSync("orders",{orderConfirm,...this.jisuan})
				uni.navigateTo({
					url:"../order/order"
				})
			},
			//删除
			del(index,id){
				uni.showModal({
					title:"温馨提示",
					content:"是否要删除",
					success:res=>{
						if(res.confirm){
							//同步页面
							this.cartList.splice(index,1)
							//同步数据库
							this.$http({
								url:"cartdelete",
								method:"post",
								data:{id}
							}).then(res=>{
								if(this.cartList.length==0)this.buffer=false		
							})
						}
					}	
				})
			},
			//添加与减少
			changeNum(type,index,id){
				if(type==1){
				if(this.cartList[index].num==1){
					this.$tool.tip("请左滑删除");return;
				}
				--this.cartList[index].num;
				}else{
					if(this.cartList[index].num == 10)return;
					++this.cartList[index].num;
				}
				this.$http({
					url:"cartedit",
					method:"post",
					data:{id,type}
				}).then(res=>{
					console.log(res);
				})
			},
			//单选使全选
			dan(index){
				 this.cartList[index].status=!this.cartList[index].status
				this.allStatus=this.cartList.every(item=>{
					return item.status
				})
			},
			//全选
			changeAll(){
				this.allStatus= !this.allStatus
				this.cartList.forEach(item=>{
					item.status=this.allStatus
				})
			},
			getCart(uid){
				this.$http({
					url:"cartlist",
					data:{uid}
				}).then(res=>{
					if(res.list==null){
						this.buffer=false
					}else{
						this.buffer=true
						this.cartList=res.list
						this.cartList.forEach(item=>{
							item.img=this.$URL+item.img
							item.status=true;
						})
						console.log(this.cartList);
					}	
				})
			}
		}
}
</script>

<style scoped>
	/* 引入样式文件 */
	@import url("@/static/css/cart.css");
</style>
